<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="js/vue.js"></script>
  <script src="js/font.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jQueryRotate.js"></script>
  <script src="js/particles.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/shakes.js"></script>
  <title>Rukiy's Cloud Station</title>
</head>

<body>
  <a href="waiwang.html"><button>外网</button></a> 
  <a href="neiwang.html"><button>内网</button></a> 
  <div id="particles-js" style="position:absolute; vpn: 0; z-index: -1; width: 100%;height: 100%;">
    <canvas class="particles-js-canvas-el" width="1303" height="960" style="width: 100%; height: 100%;"></canvas>
  </div>
  <div id="wrap">
    <div id="vpn">
      <div id="logo">
        <img class="logo" v-bind:src="logo" />
        <p></p>
        <div class="type-js headline">
          <h1 class="text-js">{{title}}</h1>
        </div>
        <div id="kg-btn">
          <input class='tgl tgl-flip' v-model="switchValue" id='switch' type='checkbox' />
          <label class='tgl-btn' data-tg-off='VPN' data-tg-on='内网' for='switch'></label>
        </div>
      </div>
    </div>
    <div id="main">
      <!-- 外网访问地址 -->
      <div class="vpn app animated fadeInLeft">
        <ul>
          <li v-for="shake in shakes">
            <a v-bind:href="shake.vpn" v-bind:target="shake.target"><img class="shake"
                v-bind:src="shake.image" /><strong>{{shake.show}}</strong></a>
          </li>
        </ul>
      </div>
      <!-- 内网网访问地址 -->
      <div class="net app animated fadeInRight">
        <ul>
          <li v-for="shake in shakes">
            <a v-bind:href="shake.net" v-bind:target="shake.target"><img class="shake"
                v-bind:src="shake.image" /><strong>{{shake.show}}</strong></a>
          </li>
        </ul>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <div id="footer">
    <div class="footer-contents">
      <div class="links">
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#wrap',
    data: {
      title: "Rukiy's Cloud Station",
      logo: "resource/Cloud.png",
      particles: "config/particles.json",
      shakes: [],
      switchValue: false
    },
    watch: {
      switchValue: function (newValue, oldValue) {
        if (newValue) {
          $(".vpn").css("display", "none");
          $(".net").css("display", "block")
        } else {
          $(".vpn").css("display", "block");
          $(".net").css("display", "none")
        }
      }
    },
    mounted() {
      this.switchValue = window.location.host.indexOf("rukiy") == -1;
      this.loadingDiv();
      this.init();
    },
    methods: {
      init() {
        this.initParticlesJS();
        this.initTitle();
        this.loadShakes();
      },
      //加载前显示遮罩和loading图片
      loadingDiv() {
        var _PageHeight = document.documentElement.clientHeight,
          _PageWidth = document.documentElement.clientWidth;
        var _Loadingvpn = _PageHeight > 100 ? (_PageHeight - 100) / 2 : 0,
          _LoadingLeft = _PageWidth > 35 ? (_PageWidth - 35) / 2 : 0;
        var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;vpn:0; opacity:0.3; filter: alpha(opacity=30); background-color:#000;z-index:10000;"><div class="coffee_cup"></div></div>';
        document.write(_LoadingHtml);
        document.onreadystatechange = function () {
          if (document.readyState == "complete") {
            var loadingMask = document.getElementById('loadingDiv');
            loadingMask.parentNode.removeChild(loadingMask)
          }
        }
      },
      initParticlesJS() {
        particlesJS.load('particles-js', this.particles);
      },
      initTitle() {
        $(".logo").rotate({
          bind:
          {
            mouseover: function () {
              $(this).rotate({ animateTo: 180 })
            },
            mouseout: function () {
              $(this).rotate({ animateTo: 0 })
            }
          }
        });
        autoType(".type-js", 150);
      },
      loadShakes() {
        axios.get('config/shankes1.json').then(
          response => (
            this.shakes = response.data
          )
        )
      }
    }
  })
</script>

</html>